<script lang="ts" setup>
import {reactive, ref} from 'vue'

const msg = ref('helloworld')
const user = reactive({id: 11, name: '李四', age: 18, score: 90})
</script>

<template>
  <div class="box">
    
    <!-- aaaaa 是默认插件的默认内容，如果调用的时候<demo>hello</demo> hello会替换aaaaa -->
    <slot num="100" title="标题">aaaaa</slot>

    <slot :user="user" name="user"></slot>

    <slot name="info" id="99" msg="操作数据成功"></slot>
  </div>
  <button @click="user.name = '张三丰'">修改姓名</button>
</template>

<style scoped>
.box {
  color: #fff;
  width: 300px;
  height: 200px;
  margin: 5px;
  padding: 6px;
  background-color: #2c3e50;
}
</style>
